<template>
  <div class="member-safe-mobile-page">
    <!-- 顶部标题 -->
    <div class="xtx-center-head">
      <h4 class="title">更换手机号码</h4>
    </div>
    <!-- 成功提示 -->
    <div class="xtx-success-box" v-if="step===3">
      <span class="iconfont icon-queren2"></span>
      <p class="tit">手机号码更换成功</p>
      <p class="desc">您可以在下次使用新号码进行登录</p>
      <router-link class="btn" to="/member/safe">返回</router-link>
    </div>
    <div v-else>
      <!-- 步骤条 -->
      <xtx-step :currStep="step" :steps="steps"></xtx-step>
      <!-- 提示 -->
      <div class="xtx-safe-tip" v-if="step===1">
        <p>已绑定的手机：180****1849</p>
        <p>若该手机号已无法使用请联系客服</p>
      </div>
      <!-- 表单 -->
      <form class="xtx-form-label">
        <div class="xtx-form-item" v-if="step===1">
          <label>验证码：</label>
          <input type="text" placeholder="短信验证码" />
          <span class="code">发送验证码</span>
        </div>
        <div class="xtx-form-item" v-if="step===2">
          <label>手机号：</label>
          <input type="text" placeholder="请输入新的手机号" />
        </div>
        <div class="xtx-form-item" v-if="step===2">
          <label>验证码：</label>
          <input type="text" placeholder="短信验证码" />
          <span class="code">发送验证码</span>
        </div>
        <div class="xtx-form-item">
          <label></label>
          <a class="submit" href="javascript:;" @click="step++">下一步</a>
        </div>
      </form>
      <!-- 提示 -->
      <div class="xtx-safe-warn" style="margin:40px">
        <p>温馨提示</p>
        <p>为保障您的帐号安全，变更重要信息需要身份验证</p>
        <p>若有疑问请联系在线客服或拨打400-0000-000（周一至周日 8:00-18:00）</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'member-safe-mobile-page',
  data () {
    return {
      step: 1,
      steps: [{ title: '验证身份' }, { title: '修改手机号码' }, { title: '完成更换' }]
    }
  }
}
</script>

<style scoped lang='less'>
@import "./styles/mobile.less";
.xtx-step {
  padding: 50px 120px;
}
</style>
